<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>笔记</title>
    <link rel="stylesheet" href="./src/other/github-markdown.css">
    <link rel="stylesheet" href="./src/other/atom-one-dark.css">
    <script src="./src/other/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <style>
        .markdown-body {
            box-sizing: border-box;
            min-width: 200px;
            max-width: 980px;
            margin: 0 auto;
            padding: 45px;
        }
    </style>
</head>

<body>
    <article class="markdown-body">
        <h1 id="webpack-react-learning">webpack react learning</h1>
<h2 id="-">项目结构搭建</h2>
<h2 id="webpack-">webpack配置文件</h2>
<ol>
<li><p>安装webpack</p>
<pre><code> npm install webpack -g  #全局安装
 npm install webpack --save-dev #项目内安装
</code></pre></li>
<li><p>配置入口文件</p>
<pre><code> var path = require(&#39;path&#39;);
 module.exports = {
     // 入口文件
     entry: path.resolve(__dirname, &#39;src/js/app.js&#39;),
     // 输出文件
     output: {
         // 输出至哪个文件夹
         path: path.resolve(__dirname, &#39;dist&#39;),
         // 输出的文件名
         filename: &#39;bundle.js&#39;
     }
 }
</code></pre></li>
<li><p>运行项目</p>
<pre><code> webpack --config webpack.develop.config.js
</code></pre></li>
</ol>
<h2 id="-package-json-">使用package.json改造配置文件</h2>
<ul>
<li><p>方便启动项目,可以在package.json 中添加脚本</p>
<pre><code>  &quot;scripts&quot;: {
      &quot;develop&quot;: &quot;webpack --config webpack.develop.config.js&quot;,
      &quot;publish&quot;: &quot;webpack --config webpack.publish.config.js&quot;
  }
</code></pre></li>
<li><p>运行项目</p>
<pre><code>  npm run develop
</code></pre></li>
</ul>
<h2 id="-webpack-dev-server-">使用webpack-dev-server实现浏览器自动刷新</h2>
<ol>
<li><p>安装webpack-dev-server</p>
<pre><code> npm install webpack-dev-server --save-dev
</code></pre></li>
<li><p>修改package.json中配置文件</p>
<pre><code> &quot;develop&quot;: &quot;webpack-dev-server --config webpack.develop.config.js --devtool eval-source-map --progress --colors --inline --hot --content-base ./dist&quot;,
</code></pre></li>
<li><p>使用npm运行项目</p>
<pre><code> npm run develop
</code></pre></li>
<li><p>此时更改代码后,项目会自动构建, 浏览器也会自动刷新</p>
</li>
</ol>
<h2 id="react-react-dom-babel-loader-">react&amp;&amp;react-dom以及babel-loader的使用</h2>
<ol>
<li><p>安装react 和 react-dom</p>
<pre><code> npm install react react-dom --save
</code></pre></li>
<li><p>安装babel-loader以及相关依赖</p>
<pre><code> npm install babel-loader --save-dev
 npm install babel-core babel-preset-es2015 babel-preset-react --save-dev
</code></pre></li>
<li><p>修改webpack.develop配置文件</p>
<pre><code> module: {
  rules: [{
          test: /\.jsx?$/,
          use: [{
              loader: &#39;babel-loader&#39;,
              options: {
                  presets: [&#39;es2015&#39;, &#39;react&#39;]
              }
          }]
      }]
 }
</code></pre></li>
<li><p>app.js中书写react代码</p>
<pre><code> // 引入React
 import React, { Component } from &#39;react&#39;
 // 引入ReactDOM
 import ReactDOM from &#39;react-dom&#39;

 // 使用ReactDOM渲染html节点
 ReactDOM.render(
     &lt;div&gt;
         hello world
     &lt;/div&gt;,
     document.getElementById(&#39;app&#39;)
 )
</code></pre></li>
<li><p>dist目录下index.html中引入bundle.js,并且加入一个id为app的div</p>
</li>
<li><p>修改了配置文件需要重新手动构建项目</p>
<pre><code> npm run develop
</code></pre></li>
</ol>
<h2 id="css-loader-style-loader-">css-loader&amp;&amp;style-loader的使用</h2>
<ol>
<li><p>安装</p>
<pre><code> npm install css-loader style-loader --save-dev
</code></pre></li>
<li><p>修改配置文件</p>
<pre><code>  rules: [{
      test: /\.jsx?$/,
      use: [{
          loader: &#39;babel-loader&#39;,
          options: {
              presets: [&#39;es2015&#39;, &#39;react&#39;]
          }
      }]
  }, {
      test: /\.css$/,
      // 注意:必须先写style-loader再写css-loader
      loader: &#39;style-loader!css-loader&#39;
      // 下面这种写法也可以
      // use: [&#39;style-loader&#39;, &#39;css-loader&#39;]
  }]
</code></pre></li>
<li><p>书写CSS文件,并在js或jsx文件中引入CSS文件</p>
</li>
<li><p>重新构建</p>
<pre><code> npm run develop
</code></pre></li>
</ol>
<h2 id="sass-loader-">sass-loader的使用</h2>
<ol>
<li><p>安装sass-loader</p>
<pre><code> // sass-loader的使用需要安装node-sass
 npm install node-sass --save
 npm install sass-loader --save-dev
</code></pre></li>
<li><p>添加配置文件</p>
<pre><code> // 处理js中引用sass文件
 {
     test: /\.scss$/,
     use: [&#39;style-loader&#39;, &#39;css-loader&#39;, &#39;sass-loader&#39;]
 }
</code></pre></li>
<li><p>书写sass文件</p>
</li>
</ol>
<h2 id="url-loader-">url-loader的使用</h2>
<ol>
<li><p>安装url-loader和file-loader</p>
<pre><code> npm install url-loader file-loader -save-dev
</code></pre></li>
<li><p>添加配置文件</p>
<pre><code> // 处理图片操作
 {
     test: /\.(png|jpg|jpeg|gif)$/,
     use: &#39;url-loader?limit=25000&#39;
 },
 // 处理iconfont
 {
     test: /\.(eot|woff|ttf|woff2|svg)$/,
     use: &#39;url-loader?limit=2500&#39;
 }
</code></pre></li>
<li><p>引用图片文件</p>
</li>
</ol>
<h2 id="webpack-">webpack 发布策略</h2>
<h3 id="-">修改配置文件</h3>
<ol>
<li><p>将webpack.develop.config.js中的配置拷贝到webpack.publish.config.js中</p>
</li>
<li><p>新建一个.bablerc文件,添加如下内容,同时去除webpack.publish.config.js中和此相关的配置</p>
<pre><code> {
     &quot;presets&quot;:[&quot;es2015&quot;,&quot;react&quot;]
 }
</code></pre></li>
<li><p>修改url-loader中相关配置</p>
<pre><code> // 处理图片操作
 {
     test: /\.(png|jpg|jpeg|gif)$/,
     use: &#39;url-loader?limit=25000&amp;name=images/[name].[ext]&#39;
         // 构建时会构建一个images文件夹存放图片
 },
 // 处理iconfont
 {
     test: /\.(eot|woff|ttf|woff2|svg)$/,
     use: &#39;url-loader?limit=2500&amp;name=fonts/[name].[ext]&#39;
         // 构建时会构建一个fonts文件夹存放icon
 }
</code></pre></li>
</ol>
<h3 id="-">分离第三方包</h3>
<ol>
<li><p>修改入口文件</p>
<pre><code> // 分离第三方包后的入口文件
 entry:{
     app:path.resolve(__dirname, &#39;src/js/app.js&#39;),
     // 需要分离的第三方包名写在数组中
     vendors:[&#39;react&#39;,&#39;react-dom&#39;]
 },
</code></pre></li>
<li><p>增加插件</p>
<pre><code> plugins:[
   // 分离第三方包插件
   new webpack.optimize.CommonsChunkPlugin({name:&#39;vendors&#39;,filename:&#39;vendors.js&#39;})
 ]
</code></pre></li>
<li><p>在index.html中引入vendors.js</p>
</li>
<li><p>运行npm run publish会看到一个vendors.js被生成</p>
</li>
</ol>

    </article>
</body>

</html>